<template>
    <view class="flex fate-item">
        <view class="icon">
            <image class="icon-image" mode="widthFix" :src="iconMap[item.type]"></image>
        </view>
        <view class="content">
            <span class="tip">{{ `${item.name}运势` }}：</span>
            <span>{{ item.value }}</span>
        </view>
    </view>
</template>
<script setup lang="ts">
import love_icon from '/static/assets/images/index/love.png'
import work_icon from '/static/assets/images/index/work.png'
import money_icon from '/static/assets/images/index/money.png'

const iconMap = { 'love': love_icon, work: work_icon, money: money_icon }

const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
})
</script>
<style lang="less" scoped>
.fate-item {
    margin-bottom: 32rpx;

    .icon {
        margin-right: 10rpx;
        height: 40rpx;
        display: flex;
        align-items: center;

    }

    .icon-image {
        width: 20rpx;
        display: block;
    }

    .content {
        color: #333333;
        font-size: 28rpx;
        line-height: 40rpx;

        .tip {
            color: #000;
        }
    }
}
</style>